<!-- ？？？ -->

<template>
  <div
      style="display: flex; justify-content: space-between;margin-top: 80px;margin-bottom: 100px ;padding-left: 40px; padding-right: 50px;">

    <div style="width: 48%;background-color: whitesmoke;">
      <el-form ref="form" :model="form" label-width="80px">

        <el-form-item label="待改内容">
          <el-input type="textarea" v-model="form.text" :rows="10"></el-input>
        </el-form-item>
        <el-form-item label="改写强度">
          <el-select v-model="form.level" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="horizontal-form-item">
          <div style="display: flex">

            <el-button type="primary" @click="onSubmit" style="margin-right: 10px;height: 40px">开始智能改写</el-button>
            <el-button @click="clearText()" class="ml-10" style="margin-right: 10px;height: 40px">清空文本</el-button>
          </div>
          <div style="display: flex;margin-top: 10px">
            <el-upload
                class="upload-demo mr-10"
                action="http://localhost:8081/file/uploadHandWrite"
                multiple
                :on-success="res=>uploadSuccess(res.data)">
              <el-button type="primary">识别手写文字</el-button>
            </el-upload>
            <el-upload
                class="upload-demo mr-10"
                action="http://localhost:8081/file/uploadNormal"
                multiple
                :on-success="res=>uploadSuccess(res.data)">
              <el-button type="primary">识别非手写文字</el-button>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div style="width:50%;display: grid; grid-template-rows: auto auto;">
      <el-card style="height: 430px">
        <strong>改写后内容</strong>
        <el-divider></el-divider>
        {{ rewritingText }}
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [{
        value: '<L1>',
        label: '略微改写'
      }, {
        value: '<L2>',
        label: '改写一部分'
      }, {
        value: '<L3>',
        label: '正常改写'
      }, {
        value: '<L4>',
        label: '正常改写加强版'
      }, {
        value: '<L5>',
        label: '偏高强度改写'
      }, {
        value: '<L6>',
        label: '最高强度改写'
      }],
      form: {
        text: '',
        level: '<L6>'
      },
      rewritingText: ''
    }
  },
  methods: {
    clearText() {
      this.form.text = ''
    },
    uploadSuccess(data) {
      this.form.text = ''
      this.form.text = data
    },
    onSubmit() {
      this.sendDataToServertext();
    },
    async sendDataToServertext() {
      try {
        // 准备发送的数据
        const dataToSend = {
          text: this.form.text, // 表单
          level: this.form.level,
        };
        // 发送 POST 请求到端口 8081
        const response = await fetch('http://localhost:8081/text_rewriting', {
          method: 'POST', // 注意这里改为 POST 请求
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(dataToSend)
        });
        // 解析服务器返回的响应数据
        const data = await response.json();

        this.rewritingText = data.data
      } catch (error) {
        // 处理错误
        console.error('发送数据时出错：', error);
      }
    },
  }
}
</script>
<style>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.horizontal-form-item {
  display: flex;
  align-items: center; /* 如果需要垂直居中 */
}

.mr-10 {
  margin-right: 10px; /* 根据需要调整间距 */
}

.ml-10 {
  margin-left: 10px; /* 清空文本的按钮左侧间距 */
}

</style>
